<template>
  <!-- <VSelect v-model="a" style="width:200px"></VSelect>
  <VSelect v-model="a" select style="width:200px"></VSelect> -->
  <!-- <VButton type="success">Success</VButton>
  <VBatchInput v-model="a" style="width:300px" /> -->
  <!-- <div style="width:600px;height:400px;background: #eff3fe;"> -->
  <VPage :edit="false">
    <!-- <VButton @click="query111">按钮</VButton> -->
    <VTable v-bind="gridOptions" ref="tableRef" :isShowForm="isShowForm">
      <template #form="{ form }">
        <el-input
          placeholder="请输入内容"
          v-model="form.a"
          style="width: 200px"
        />
        <VBatchInput
          v-model="form.c"
          style="width: 200px"
          :width="300"
          closeText="你好"
          submitText="确认"
        />
        <el-input
          placeholder="请输入内容"
          v-model="form.a"
          style="width: 200px"
        />
        <el-input
          placeholder="请输入内容"
          v-model="form.a"
          style="width: 200px"
        />
        <el-input
          placeholder="请输入内容"
          v-model="form.a"
          style="width: 200px"
        />
        <VInputNumber v-model="b" :precision="2" :clearable="false" />
        <VBatchInput v-model="form.a" style="width: 300px" placeholder="11" />
        <el-input placeholder="11" v-model="form.b.type" style="width: 200px" />
        {{ form.f }}

        <VDataRange v-model="form.b.value" type="daterange" />
        <!-- <VWeekRangePicker  v-model="form.h" /> -->
        <teleport v-if="tabsLoad" to="#tabs-load">
          <el-tabs v-model="form.planStatus" @tab-change="tabChange">
            <el-tab-pane
              v-for="(d, i) in [
                { label: '测试1', value: 0 },
                { label: '测试2', value: 2 },
              ]"
              :key="i"
              :label="`${d.label}`"
              :name="d.value"
            ></el-tab-pane>
          </el-tabs>
        </teleport>
      </template>
      <template #toolbar_buttons>
        <div
          id="tabs-load"
          style="width: 100%"
          v-dom-load="() => (tabsLoad = true)"
        ></div>
        <VButton>按钮</VButton>
        <VButton style="margin-left: auto" @click="isShowForm = !isShowForm"
          >按钮</VButton
        >
      </template>
      <template #name>
        <div>
          <VText
            value="1.测试批量导入\n2.这是一个悲伤的故事\n3.一鼓作气\n4.在怎测试,都是这样的\n5.行业资讯,了解下"
            title="你好"
            :line="3"
            copy
          ></VText>
        </div>
      </template>
    </VTable>
  </VPage>
  <!-- </div> -->
  <!-- <VDataRange v-model="a" type="daterange"/> -->
  <!-- <div style="margin: 50px">
    <VMoreDropdown :items="dropdownItems" @command="handleDropdownCommand"/>
    <VInputNumber v-model="b" :precision="2"/>
  </div> -->
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
const a = ref([]);
const b = ref(null);
const g = ref([]);
const isShowForm = ref(true);

const tabsLoad = ref(false);

const tableRef = ref();

const tabChange = (val) => {
  tableRef.value.getForm();
};
// import {VDataRange} from "@xbd-vui";
// import VBatchInput from "@xbd-vui";
// const tableRef = ref();
// const query111 = () => {
//   console.log(11111111);

//   tableRef.value.getForm();
// };

// const dropdownItems = [
//   {
//     label: "取消待下单数量",
//     command: "cancelQty",
//     type: "primary",
//     size: "large",
//   },
//   {
//     label: "操作日志",
//     command: "viewLogs",
//   },
// ];

// const handleDropdownCommand = (command: string) => {
//   const handle = {
//     cancelQty: () => {
//       console.log("取消待下单数量");
//     },
//     viewLogs: () => {
//       console.log("操作日志");
//     },
//   };
//   handle[command]();
// };

let list = ref([
  {
    id: 10001,
    name: "Test1",
    nickname: "T1",
    role: "Develop",
    sex: "Man",
    age: 28,
    g: [],
    h: [],
    address: "Shenzhen",
  },
  {
    id: 10002,
    name: "Test2",
    nickname: "T2",
    role: "Test",
    sex: "Women",
    age: 22,
    address: "Guangzhou",
  },
  {
    id: 10003,
    name: "Test3",
    nickname: "T3",
    role: "PM",
    sex: "Man",
    age: 32,
    address: "Shanghai",
  },
  {
    id: 10004,
    name: "Test4",
    nickname: "T4",
    role: "Designer",
    sex: "Women",
    age: 23,
    address: "Shenzhen",
  },
  {
    id: 10005,
    name: "Test5",
    nickname: "T5",
    role: "Develop",
    sex: "Women",
    age: 30,
    address: "Shanghai",
  },
]);

onMounted(() => {
  setTimeout(() => {
    gridOptions.data = list.value;
  }, 3000);
});

const gridOptions = reactive({
  border: true,
  size: "small",
  formConfig: {
    data: {
      b: { type: "creat", value: [], range: true },
    },
  },
  columns: [
    { type: "seq", width: 50 },
    { type: "checkbox", title: "ID", width: 120 },
    {
      field: "name",
      title: "name",
      slots: {
        default: "name",
      },
    },
    { field: "sex", title: "sex" },
    { field: "address", title: "Address" },
  ],
  // proxyConfig: {
  //   autoLoad: true,
  //   props: {
  //     result: "data",
  //     total: "total",
  //   },
  //   ajax: {
  //     query: async ({ page, form }) => {
  //       return new Promise((resolve) => {
  //         setTimeout(() => {
  //           resolve({
  //             data: [
  //               {
  //                 id: 10005,
  //                 name: "Test5",
  //                 nickname: "T5",
  //                 role: "Develop",
  //                 sex: "Women",
  //                 age: 30,
  //                 address: "Shanghai",
  //               },
  //             ],
  //             total: 500, // 确保 total 是数字
  //           });
  //         }, 500); // 模拟延迟
  //       });
  //     },
  //   },
  // },
});
</script>
<style>
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}
#app {
  height: 100%;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
</style>
